<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单例模式</title>
  <style>
    .model {
      border: 1px solid black;
      position: fixed;
      width: 300px;
      height: 300px;
      top: 20%;
      left: 50%;
      margin-left: -150px;
      text-align: center;

    }
  </style>
</head>
<body>
  <h1>弹窗，⽆论点击多少次，弹窗只应该被创建⼀次</h1>
  <div id="loginBtn">点我</div>
  <script>
    // class 实现单例模式
    let result;
    class GetSingle{
      constructor(fn){
         if(!result){
          result = fn.apply(this, arguments)
         }
         return result
      }
    }
    // var getSingle = function (fn) {
    //   var result;
    //   return function () { // 闭包 缓存
    //     return result || (result = fn.apply(this, arguments));
    //   }
    // };
    var createLoginLayer = function () {
      var div = document.createElement('div');
      div.innerHTML = '我是登录浮窗';
      div.className = 'model'
      div.style.display = 'none';
      document.body.appendChild(div);
      return div;
    };
    // 单例模式  可以去掉一下这一行代码试试页面点击情况
    // var createSingleLoginLayer = getSingle(createLoginLayer);
    var createSingleLoginLayer = new GetSingle(createLoginLayer);
    // console.log(createSingleLoginLayer, "| createSingleLoginLayer");
    document.getElementById('loginBtn').onclick = function () {
      var loginLayer = createSingleLoginLayer;
      loginLayer.style.display = 'block';
    };
  </script>
</body>
</html>